<template>
	<view class="wpprs">
		<view class="titles">产品信息</view>
		<view class="infobox">
			<view class="info">
				<image :src="productDtl.productImg"></image>
				<view class="r">
					<view>品牌:{{ productDtl.brand }}</view>
					<view>类别:{{ productDtl.category }}</view>
					<view>名称:{{ productDtl.name }}</view>
					<view>SN:{{ productDtl.skuCode }}</view>
				</view>
			</view>
			<view class="weibao">
				<view>维保终止：2020-12-02</view>
				<view class="r">全保</view>
			</view>
		</view>
		<view class="adrssbox">
			<view class="title">定位</view>
			<view class="iptbox">
				<image src="../../../static/images/iconAddr.png"></image>
				{{ address }}
			</view>
			<view><image src="../../../static/images/iconRefesh.png" @click="getAddress"></image></view>
		</view>
		<view class="submit" @click="phoneReport">确定</view>
	</view>
</template>

<script>
import QQMapWX from '../../../utlis/qqmap-wx-jssdk.min.js';
import { productDtl, workOrderVirtual } from '../../../api/order.js';
export default {
	data() {
		return {
			address: '',
			latitude: '',
			type: '',
			productDtl: {}
		};
	},
	onLoad(e) {
		uni.setNavigationBarTitle({
			title: e.name
		});
		this.getAddress();
		this.type = e.type;
		productDtl({ id: e.id }).then((data) => {
			this.productDtl = data.content;
		});
	},
	methods: {
		phoneReport() {
			workOrderVirtual({
				productId: this.productDtl.id,
				type: this.type,
				signinLocation: this.address
			}).then((data) => {});
		},
		getAddress() {
			let _this = this;
			uni.getLocation({
				type: 'wgs84',
				altitude: true,
				success(res) {
					console.log(res);
					let qqmapsdk = new QQMapWX({
						key: '26CBZ-5X56U-D4DVT-B4KVL-6T4B5-LTBGW'
					});
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						sig: 'w276kzqX9w5s73q9DiUY2sZLVAuPev',
						success(re) {
							console.log(re.result.address); //这里边就是你需要的定位数据了
							_this.address = re.result.address;
						},
						fail(re) {
							console.log(re, '失败信息');
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.wpprs {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-image: url('https://junminyiqi.oss-cn-shanghai.aliyuncs.com/flies/d29eccf2-f7be-dbc8-4853-e3b19055825b.png');
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 30upx;
	box-sizing: border-box;
	.titles {
		font-weight: 500;
		color: #fff;
		border-left: 6upx solid #fff;
		padding-left: 30upx;
	}
	.infobox {
		background-color: #fff;
		padding: 30upx;
		border-radius: 10upx;
		margin-top: 30upx;
		padding-bottom: 30upx;
		font-size: 28upx;
		.info {
			display: flex;
			image {
				width: 200upx;
				height: 200upx;
			}
			.r {
				padding-left: 20upx;
				view {
					padding-bottom: 10upx;
				}
			}
		}
		.weibao {
			display: flex;
			position: relative;
			padding-top: 30upx;
			border-top: 1px solid #ccc;
			.r {
				position: absolute;
				right: 0;
			}
		}
	}
	.adrssbox {
		display: flex;
		padding: 30upx;
		border-radius: 10upx;
		background: #fff;
		font-size: 28upx;
		margin-top: 30upx;
		.title {
			width: 100upx;
		}
		.iptbox {
			width: 100%;
		}
		image {
			width: 30upx;
			height: 30upx;
		}
	}
	.submit {
		margin-top: 30upx;
		padding: 26upx;
		background: red;
		border-radius: 60upx;
		text-align: center;
		color: #fff;
	}
}
</style>
